Автоматическая оптимизация графики в WebP и AVIF через Nginx на Ubuntu 24.04
Приветствую, друзья!
Вы можете арендовать сервер с невероятно быстрыми процессорами AMD Ryzen и настроить моментальный отклик базы данных MySQL, но если при загрузке главной страницы сайта браузер пользователя начинает выкачивать несжатые JPEG или PNG картинки размером по 5–10 Мегабайт каждая — проект будет безбожно тормозить.
В 2026 году скорость загрузки (метрики Google Core Web Vitals, такие как LCP) напрямую влияет на позиции сайта в поисковой выдаче и конверсию. Стандартом де-факто для веб-графики стали современные форматы WebP и еще более эффективный AVIF. Они обеспечивают сжатие изображений на 30–50% сильнее классического JPEG при сохранении идентичного визуального качества.
Пытаться переводить картинки в новые форматы вручную перед загрузкой на сайт — это тупиковый путь для автоматизации. Система должна делать это самостоятельно на уровне сервера.
В этой статье мы разберем техническую изнанку современных форматов и настроим полностью автоматическую конвертацию и отдачу WebP/AVIF «на лету» средствами веб-сервера Nginx.
Key Takeaways: Главное об оптимизации графики
AVIF — технологический лидер: Формат AVIF сжимает файлы значительно эффективнее WebP, особенно в сложных градиентах и мелких деталях, но требует чуть больше процессорного времени на кодирование.
Автоматизация решает всё: Использование связки Nginx с модулями обработки или готовых CLI-утилит в фоне (
cwebp,avifenc) полностью избавляет контент-менеджеров от рутины.Бесшовная отдача (Fallback): Не все старые браузеры (или специфические ОС) поддерживают AVIF. Сервер должен уметь на лету проверять заголовки браузера
Acceptи отдавать AVIF тем, кто его понимает, а остальным — возвращать стандартный WebP или JPEG. Именно поэтому многие до сих пор используют WebP.
WebP против AVIF: Какая разница в байтах?
Чтобы понять, почему индустрия уходит от классических форматов, давайте взглянем на физику сжатия. WebP базируется на алгоритмах видеокодека VP8, в то время как AVIF использует возможности ультрасовременного сжатия кодека AV1.
| Формат файла | Средний размер (от оригинала) | Поддержка прозрачности (Альфа-канал) | Наличие анимации | Нагрузка на CPU при создании |
| JPEG | 100% (базовый эталон) | Нет | Нет | Минимальная |
| WebP | ~65–70% (сжатие на 30%) | Да | Да | Низкая |
| AVIF | ~40–50% (сжатие на 50%) | Да | Да | Высокая (требует мощных ядер) |
Архитектура автоматической отдачи на уровне Nginx
Самый элегантный и производительный способ внедрения WebP/AVIF — это использование Nginx в качестве «умного прокси». Мы не будем заставлять сервер генерировать картинку в ту же миллисекунду, когда пришел пользователь (это создаст дикую паразитную нагрузку на CPU). Мы настроим архитектуру так, чтобы Nginx проверял наличие заранее подготовленной копии файла.
Шаг 1. Настройка Nginx (Проверка заголовков браузера)
Когда браузер запрашивает картинку, он отправляет заголовок Accept, в котором перечисляет форматы, которые он умеет читать. Например: image/avif,image/webp,*/*.
Откройте конфигурационный файл веб-сервера Nginx (в секции http файла /etc/nginx/nginx.conf):
map $http_accept $img_suffix {
default "";
"~*image/avif" ".avif";
"~*image/webp" ".webp";
}
Этот маппинг проверяет: если браузер поддерживает AVIF, переменная $img_suffix получит значение .avif. Если AVIF нет, но есть WebP — значение .webp.
Теперь внутри конфигурации вашего виртуального хоста (в блоке server) пропишите умную отдачу статики:
location ~* ^.+\.(png|jpg|jpeg)$ {
# Проверяем существование файла с нужным суффиксом
try_files $uri$img_suffix $uri =404;
# Добавляем правильные заголовки кэширования
expires 30d;
add_header Cache-Control "public, no-transform";
add_header Vary Accept;
}
Как это работает: Пользователь запрашивает файл photo.jpg. Если его браузер поддерживает AVIF, Nginx с помощью конструкции try_files сначала проверит, лежит ли на диске файл photo.jpg.avif. Если находит — бесшовно отдает его, сохраняя в адресной строке старое имя photo.jpg. Если файла нет — отдает стандартный оригинальный photo.jpg.
Шаг 2. Автоматизация фоновой конвертации (Скрипт по Cron)
Теперь нам нужно сделать так, чтобы сервер самостоятельно находил новые загруженные пользователями картинки (например, в папке /var/www/uploads/) и создавал для них .webp и .avif копии в фоновом режиме.
Установим необходимые консольные утилиты оптимизации в Ubuntu 24.04:
sudo apt update
sudo apt install webp libavif-bin findutils -y
Создадим системный Bash-скрипт автоматизации:
mkdir -p ~/scripts && nano ~/scripts/img_compress.sh
Вставьте в него следующий рабочий код:
#!/bin/bash
TARGET_DIR="/var/www/my_site/uploads"
# 1. Находим все jpg/png файлы, для которых еще нет WebP копии, и конвертируем
find "$TARGET_DIR" -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \) | while read -r img; do
if [ ! -f "${img}.webp" ]; then
cwebp -q 82 "$img" -o "${img}.webp" > /dev/null 2>&1
fi
# 2. Находим и создаем AVIF копии
if [ ! -f "${img}.avif" ]; then
# -q 65 — оптимальный баланс качества и размера для avif
avifenc -q 65 "$img" "${img}.avif" > /dev/null 2>&1
fi
done
Сделайте скрипт исполняемым:
chmod +x ~/scripts/img_compress.sh
Теперь добавим его в системный планировщик задач cron, чтобы он запускался, например, каждый час и обрабатывал новые медиафайлы:
crontab -e
Добавьте строчку автоматического запуска:
0 * * * * /bin/bash /root/scripts/img_compress.sh
Личный опыт
Достаточно давно (в районе 10 лет назад) мне предоставили сайт, построенный на WordPress, и сказали, что он тяжело грузится. Я, конечно же, провел проверку, и помимо плагинов, которые нагружали систему, я также заметил, что картинки, размещенные на сайте (а их было МНОГО), были в формате JPEG. Это безумно нагружало сайт, и он грузился достаточно долго — по современным меркам запредельно долго, в районе 5–7 секунд. Я пересмотрел все картинки на сайте и вручную перевел их в формат WebP, за счет чего значительно сократил время загрузки сайта и нагрузку на сервер. Поэтому, если вы хотите, чтобы ваш сайт не только быстро грузился, но и был в топе поисковиков, обязательно сжимайте изображения и увеличивайте скорость загрузки.
FAQ: Коротко о главном
Сильно ли процесс конвертации нагружает сервер?
Утилита
cwebpработает очень быстро и почти незаметно для системы. Кодирование вavifenc— это ресурсоемкая операция, которая способна загрузить процессорное ядро на 100% в момент сжатия тяжелой картинки. Именно поэтому мы запускаем скрипт в фоне по крону (или в часы минимального трафика), а не генерируем файлы «на лету» в момент запроса пользователя.Можно ли использовать сторонние модули Nginx вроде ngx_pagespeed?
Можно, но они часто работают нестабильно, требуют сложной компиляции веб-сервера из исходников и создают непредсказуемую динамическую нагрузку на оперативную память. Фоновая генерация статических копий через Bash-скрипты — это самый надежный, отказоустойчивый и производительный метод в архитектурной практике.
Заключение
Автоматическое внедрение современных форматов WebP и AVIF на уровне сервера позволяет кардинально снизить вес страниц вашего сайта (зачастую суммарный объем медиа-трафика падает в 2–3 раза). Это напрямую ускоряет загрузку сайта на смартфонах в сетях 3G/4G, снижает показатель отказов (Bounce Rate) и экономит пропускную способность сетевого порта вашего сервера.
Поскольку утилиты кодирования графики (особенно avifenc) требуют высокой вычислительной мощности и создают плотную нагрузку на дисковую систему в моменты сканирования папок, для стабильной работы бэкенда необходима качественная аппаратная платформа.
И если вы сейчас оптимизируете свои интернет-магазины, новостные порталы со множеством картинок или B2B-платформы, обратите внимание на наши услуги NVME VPS / Dedicated Server.
Автор статьи — Anatolie Cohaniuc